<template>
    <div class="statement zy-content">
        <div class="routerTitle">
            待采购清单
        </div>
        <Form :label-width="85" class="search-form">
            <Row>
                <Col :span="5">
                    <FormItem label="工单状态：">
                        <Select v-model="searchParams.status" clearable>
                            <Option v-for="m in statusList" :value="m.val" :key="m.val">{{ m.n }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col :span="5">
                    <FormItem label="维修单号：">
                        <Input type="text" clearable v-model="searchParams.workorderNo" :placeholder="`${$t('common.inputInfo')}`"></Input>
                    </FormItem>
                </Col>
                <Col :span="5">
                   <FormItem :label="$t('common.SpareNumber')">
                        <Input type="text" clearable v-model="searchParams.maCode":placeholder="`${$t('common.inputInfo')}`"></Input>
                    </FormItem>
                </Col>
                <Col :span="5">
                    <FormItem label="规格型号：">
                        <Input type="text" clearable v-model="searchParams.maModel" :placeholder="`${$t('common.inputInfo')}`"></Input>
                    </FormItem>
                </Col>
                <Col :span="5">
                    <FormItem label="备件名称：">
                        <Input type="text" clearable v-model="searchParams.maName" :placeholder="`${$t('common.inputInfo')}`"></Input>
                    </FormItem>
                </Col>
                <Col :span="5">
                    <FormItem label="接单人：">
                        <Input type="text" clearable v-model="searchParams.receBy" :placeholder="`${$t('common.inputInfo')}`"></Input>
                    </FormItem>
                </Col>
                <Col :span="5">
                    <FormItem label="创建时间：">
                        <DatePicker
                                :value="dateTimeRange"
                                type="datetimerange"
                                placement="bottom-end"
                                :placeholder="`${$t('common.selectInfo')}`"
                                @on-change="handleRangeChange"
                        />
                    </FormItem>
                </Col>
                <Col :span="4" align="center" v-if="checkBtnPermission.workorderRecordQueryPoPage">
                    <Button type="primary" @click="onSearch">{{$t('common.Query')}}</Button>
                </Col>
            </Row>
        </Form>
        <Table :columns="columns" :data="list">
            <template slot-scope="{ row }" slot="action">
                <span class="table-operate-btn">
                  <Icon type="ios-list-box-outline" />详情
                </span>
                <span class="table-operate-btn">
                  <Icon type="ios-trash-outline" />删除
                </span>
            </template>
        </Table>
        <div class="pageWrap">
            <Page
                    :total="total"
                    :page-size="pageSize"
                    :page-size-opts="$variable.pageSizes"
                    :current="pageNum"
                    @on-change="changePageNum"
                    @on-page-size-change="changePageSize"

                    show-sizer
                    show-total
            />
        </div>
        <!--详情-->
        <order-detail-modal ref="orderDetailModal"/>
        <!--委外确认-->
        <wait-confirm-modal
                :workorderUpdateTimes="checkBtnPermission.workorderUpdateTimes"
                :workorderAttachmentAdd="checkBtnPermission.workorderAttachmentAdd"
                ref="waitConfirmModal"
                @handleRefresh="handleRefresh"/>
    </div>
</template>

<script>
    import orderDetailModal from './modules/orderDetailModal'
    import WaitConfirmModal from "./modules/waitConfirmModal";

    export default {
        name: "willBuyList",
        components: {
            WaitConfirmModal,
            orderDetailModal
        },
        data() {
            return {
                total: 0,
                pageNum: 1,
                pageSize: 10,
                searchParams: {},
                checkBtnPermission: {},
                dateTimeRange: [],
                statusList: [
                    { n: "全部", val: "" },
                    { n: '待委外确认', val: 1 },
                    { n: '待采购', val: 2 },
                ],
                modeList: [
                    { n: "全部", val: "" },
                    { n: '自行维修', val: 1 },
                    { n: '保修期内维修', val: 2 },
                    { n: '委外维修', val: 3 },
                ],
                typeList: [{ label: '全部', value: undefined }],
                columns: [
                    {
                        title: '工单状态',
                        key: 'status',
                        align: 'center',
                        minWidth: 120,
                        render: (h, params) => {
                          return h('div', params.row.status === 1 ? '待委外确认' : '待采购')
                        }
                    },
                    {
                        title: '维修单号',
                        key: 'workorderNo',
                        align: 'center',
                        minWidth: 200,
                        render: (h, params) => {
                            return h('a',
                                {
                                    style: {
                                        color: 'blue',
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleledgerDetail(params.row)
                                        }
                                    }
                                }, params.row.workorderNo)
                        }
                    },
                    {
                        title: '创建开始时间',
                        key: 'createTime',
                        align: 'center',
                        minWidth: 180,
                    },
                    {
                        title: '接单人',
                        key: 'receBy',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: `${this.$t('common.SpareNumber')}`,
                        key: 'maCode',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: `${ this.$t('equipCheck.Model') }`,
                        key: 'maModel',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '备件名称',
                        key: 'maName',
                        align: 'center',
                        minWidth: 200,
                        tooltip: true
                    },
                    {
                        title: '采购数量',
                        key: 'purchaseNum',
                        align: 'center',
                        minWidth: 200
                    },
                    // {
                    //   title: `${ this.$t('common.operation') }`,
                    //   slot: "action",
                    //   width: 180,
                    //   align: "center",
                    //   fixed: 'right',
                    // }
                ],
                list: [],
                orgList: [],
            }
        },
        created() {
            this.getList()
            this.getMainList()
        },
        mounted() {
            let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
            for(let item of itemList){
                if(item.code=="workorderRecordQueryPoPage"){
                    this.checkBtnPermission.workorderRecordQueryPoPage = true
                }
                if(item.code=="workorderQueryById"){
                    this.checkBtnPermission.workorderQueryById = true
                }
                if(item.code=="workorderAttachmentAdd"){
                    this.checkBtnPermission.workorderAttachmentAdd = true
                }
                if(item.code=="workorderUpdateTimes"){
                    this.checkBtnPermission.workorderUpdateTimes = true
                }
            }
        },
        methods: {
            //获取故障数据
            getMainList() {
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderFaultNature/selectList',
                    params: {}
                }).then(res => {
                    if (res.code === 200) {
                        this.typeList = [...this.typeList, ...res.data]
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            handleRangeChange(val) {
                this.searchParams.createBegin = val[0]
                this.searchParams.createEnd = val[1]
            },
            handleledgerDetail(order) {
                if (this.checkBtnPermission.workorderQueryById) {
                    if (order.statusText == 7) {
                        this.$refs.orderDetailModal.show(order)
                    }else {
                        this.$refs.waitConfirmModal.show(order)
                    }
                }

            },
            //刷新
            handleRefresh() {
                this.getList()
            },
            changePageSize(val) {
                this.pageSize = val
                this.getList()
            },
            changePageNum(val) {
                this.pageNum = val
                this.getList()
            },
            onSearch() {
                this.pageNum = 1;
                this.getList()
            },
            getList() {
                let params = {
                    pageNo:this.pageNum,
                    pageSize:this.pageSize,
                };
                for (let key in this.searchParams) {
                    if (key === 'orgCode' && this.searchParams['orgCode']) {
                        const arr = this.searchParams[key]
                        const { length, last=length-1 } = arr
                        this.$set(params, key, arr[last])
                    }else {
                        if (this.searchParams[key]) {
                            this.$set(params, key, this.searchParams[key])
                        }
                    }

                }
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderRecord/queryPoPage',
                    params: params
                }).then(res => {
                    
                    if(res.code === 200){
                        this.list = res.data.list
                        this.total = res.data.total
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },

        },
    }
</script>

<style scoped>

</style>
